<template>
  <section class="container">
    <div class="box">
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </section>
</template>
<style scoped>
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container .box{
  position: relative;
  width: 200px;
  height: 200px;
  animation: rotatBox 10s linear infinite;
}
@keyframes rotatBox{
  0%{
    transform: rotate(0deg)
  }
  100%{
    transform: rotate(360deg)
  }
}
.container .box .circle{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #38c1ff;
  border-radius: 50%;
  animation: animate 5s linear infinite;
}
.container .box .circle:nth-child(2){
/* .container .box .circle + .circle{ */
  background: #ff3378;
  animation-delay: -2.5s;
}
@keyframes animate{
  0%{
    transform:scale(1);
    transform-origin: left;
  }
  50%{
    transform:scale(0);
    transform-origin: left;
  }
  50.01%{
    transform:scale(0);
    transform-origin: right;
  }
  100%{
    transform:scale(1);
    transform-origin: right;
  }
}
.container h2{
  margin-top: 20px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 4px;
  color: #fff;
}
</style>